<template>
  <div class="list-common-table">
    <t-form ref="form" :data="searchModel" :label-width="80" colon @reset="reset" @submit="search">
      <t-row>
        <t-col :span="10">
          <t-row :gutter="[24, 24]">
            <t-col :span="4">
              <t-form-item label="日志类型" name="type">
                <t-input v-model="searchModel.type" class="form-item-content" />
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="请求方式" name="method">
                <t-select v-model="searchModel.method" :options="METHOD_OPTIONS" class="form-item-content" clearable />
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="操作人" name="createBy">
                <t-input v-model="searchModel.createBy" class="form-item-content" />
              </t-form-item>
            </t-col>
          </t-row>
        </t-col>

        <t-col :span="2" class="operation-container">
          <t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }">
            <template #icon><search-icon /></template>
            查询
          </t-button>
          <t-button type="reset" variant="base" theme="default">
            <template #icon><rollback-icon /></template>
            重置
          </t-button>
        </t-col>
      </t-row>
    </t-form>

    <div class="table-container">
      <t-table
        :data="renderData"
        :columns="columns"
        row-key="id"
        :hover="true"
        :pagination="pagination"
        :loading="loading"
        :header-affixed-top="headerAffixedTop"
        size="small"
        @page-change="pageChange"
      >
        <template #operations="{ row }">
          <t-space>
            <t-popconfirm content="此操作将永久删除该日志, 是否继续?" theme="danger" @confirm="del(row.id)">
              <t-button v-permission="authority.SYS_LOG_DEL" variant="text" size="small" theme="danger">
                <template #icon>
                  <delete-icon />
                </template>
                删除
              </t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { pickBy } from 'lodash';
import { DeleteIcon, RollbackIcon, SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { computed, ref } from 'vue';
import { usePagination } from 'vue-request';

import { deleteLog, logPage } from '@/api/upms/log';
import { prefix } from '@/config/global';
import { LOG_TYPES, METHOD_OPTIONS } from '@/constants';
import { useSettingStore } from '@/store';
import authority from '@/utils/authority';
import defaultPageOptions from '@/utils/pagination';

// 初始数据
const generateModel = () => {
  return {
    type: '',
    method: '',
    createBy: '',
    descs: 'create_time',
  };
};

const searchModel = ref(generateModel());

const store = useSettingStore();

const columns = [
  {
    title: '日志类型',
    colKey: 'type',
    cell: (h: any, { row }: { row: any }) => {
      return LOG_TYPES.find(({ value }) => value === row.type)?.label;
    },
  },
  { title: '标题', colKey: 'title' },
  { title: 'IP地址', colKey: 'ipAddress' },
  {
    title: '资源路径',
    colKey: 'requestUri',
    ellipsis: true,
  },
  {
    title: '请求方式',
    colKey: 'method',
    cell: (h: any, { row }: { row: any }) => {
      return METHOD_OPTIONS.find(({ value }) => value === row.method)?.label;
    },
  },
  {
    title: '参数',
    colKey: 'params',
    ellipsis: true,
  },
  { title: '操作人', colKey: 'createBy' },
  { title: '创建时间', colKey: 'createTime' },
  {
    title: '操作',
    colKey: 'operations',
  },
];

const pagination = computed(() => ({
  current: current.value,
  pageSize: pageSize.value,
  showTotal: true,
  showPageSize: true,
  total: total.value,
}));

const { data, loading, refresh, current, pageSize, total } = usePagination(
  (params) => logPage({ ...params, ...pickBy(searchModel.value) }),
  {
    ...defaultPageOptions,
  },
);

const search = () => {
  current.value = 1;
};

const renderData = computed(() => data.value?.records || []);

const pageChange = (curr: any) => {
  if (pageSize.value !== curr.pageSize) {
    pageSize.value = curr.pageSize;
  }
  if (current.value !== curr.current) {
    current.value = curr.current;
  }
};

const reset = () => {
  searchModel.value = generateModel();
};

const del = async (id: string) => {
  await deleteLog(id).then(() => {
    MessagePlugin.success('删除成功');
    refresh();
  });
};

const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any, // TO BE FIXED
);
</script>

<style lang="less" scoped>
.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  border-radius: var(--td-radius-medium);

  .table-container {
    margin-top: var(--td-comp-margin-xxl);
  }
}

.form-item-content {
  width: 100%;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .expand {
    .t-button__text {
      display: flex;
      align-items: center;
    }
  }
}

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: var(--td-comp-margin-s);
  }
}
</style>
